<template>
  <div class="friend">
    <div class="head">
      <img src="~assets/friend/friend_bg.jpg">
      <div class="pic">
        <img :src="user.head" alt="">
        <div class="name">{{ user.name }}</div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img :src="user.head" alt="">
      </div>
      <div class="content">
        <div class="name">{{ user.name }}</div>
        <div class="text">我感觉我进了一个假群……里面有好多南都记者和全国两会代表委员……</div>
        <div class="img-box">
          <img src="~assets/friend/img001.jpg" @click="showBigImg('http://h5.oeeee.com/h5/cppcc/gif/001.jpg')">
          <i class="handTips"></i>
        </div>
        <div class="ct-box">
          <div class="comment animated fadeIn">
            <i class="ionc"></i>
            <div class="tit"><i></i>南都机器人小南</div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon001.png" alt="">
      </div>
      <div class="content">
        <div class="name">南都记者商西</div>
        <div class="text">我为什么问全国人大新闻发言人傅莹关于个人信息保护立法的问题？戳视频就知道啦↓</div>
        <div class="img-box long">
          <i class="handTips"></i>
          <video class="video-1" controls>
            <source src="http://h5.oeeee.com/h5/cppcc/video/videoquan1.mp4" type="video/mp4">
          </video>
        </div>
        <div class="ct-box">
          <div class="comment">
            <i class="ionc"></i>
            <div class="tit animated fadeIn"><i></i>南都记者程姝雯、南都记者程思炜、南都记者王秀中、南都记者潘珊菊、南都记者葛倩、南都记者唐孜孜、南都实习生常蕾、南都实习生刘嫚</div>
            <div class="cont animated fadeIn pt-page-delay100">
              <p class="animated fadeIn pt-page-delay1000"><span>南都记者饶丽冬：</span>傅莹说，今年准备对网络安全法开展执法检查，关注的重点之一就是非法向他人提供个人信息和网络欺诈。开森 <i class="emo gz"></i></p>
              <p class="animated fadeIn pt-page-delay1500"><span>南都记者饶丽冬：</span>民法总则草案也有个人信息保护的条款 <i class="emo gz"></i></p>
              <p class="animated fadeIn pt-page-delay2000"><span>南都记者商西</span>回复<span>南都记者饶丽冬：</span>棒棒哒~~你之前的“700元买到个人信息”没白写呢，全国都关注了！6月网络安全法就要施行了！ <i class="emo jz"></i></p>
              <p class="animated fadeIn pt-page-delay3000"><span>南都深度新闻部副主任王佳：</span>1w个赞！《我们都“裸奔”了！南都记者700元买到同事航班/列车/银行卡等10项信息，开房记录精确到秒》记者们总算没有白跑</p>
              <p class="animated fadeIn pt-page-delay4000"><span>南都记者商西</span>回复<span>南都深度新闻部副主任王佳：</span><i class="emo gz"></i> 深度小伙伴好给力！两会期间还同步推出了调查报道《我们仔细看了50家APP和网站的隐私协议，发现你同意了很多可怕的条款》，继续关注个人信息泄露问题。</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon002.png" alt="">
      </div>
      <div class="content">
        <div class="name">南都记者尚黎阳</div>
        <div class="text">后方同事说我直播#京粤连线#时，身子一直在动 <i class="emo xl"></i></div>
        <div class="img-box long">
          <video class="video-2" controls>
            <source src="http://h5.oeeee.com/h5/cppcc/video/videoquan2.mp4" type="video/mp4">
          </video>
          <i class="handTips"></i>
        </div>
        <div class="ct-box">
          <div class="comment">
            <i class="ionc"></i>
            <div class="cont noline animated fadeIn pt-page-delay100">
              <p class="animated fadeIn pt-page-delay1000"><span>南都摄影陈辉：</span>放心，很帅很帅！</p>
              <p class="animated fadeIn pt-page-delay1500"><span>南都小编卫卫：</span>文字记者成主播 <i class="emo wl"></i> 出镜直播＋写稿两不误！！！ <i class="emo dz"></i></p>
              <p class="animated fadeIn pt-page-delay2000"><span>南都摄影陈成效：</span>南都朱军 <i class="emo tx"></i></p>
              <p class="animated fadeIn pt-page-delay3000"><span>南都记者贺蓓：</span>都抢电视台饭碗了！ <i class="emo wl"></i></p>
              <p class="animated fadeIn pt-page-delay4000"><span>南都小编湘莹：</span>人大代表覃春辉都感动得落泪了</p>
              <p class="animated fadeIn pt-page-delay5000"><span>南都记者尚黎阳</span>回复<span>南都小编湘莹：</span>是啊，我们在北京连线她丈夫（在广东连山），丈夫给她加油，她就当场泪目了</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon005.png" alt="">
      </div>
      <div class="content">
        <div class="name">南都小编卫卫</div>
        <div class="text">#我在南都#我以为我进了电视台…… <i class="emo xl"></i></div>
        <div class="img-box long">
          <video class="video-3" controls>
            <source src="http://h5.oeeee.com/h5/cppcc/video/videoquan03.mp4" type="video/mp4">
          </video>
          <i class="handTips"></i>
        </div>
        <div class="ct-box">
          <div class="comment">
            <i class="ionc"></i>
            <div class="cont noline animated fadeIn pt-page-delay100">
              <p class="animated fadeIn pt-page-delay1000"><span>南都小编江英：</span>这是在做南都马上问-京粤连线？<i class="emo hx"></i></p>
              <p class="animated fadeIn pt-page-delay2000"><span>南都小编卫卫</span>回复<span>南都小编江英：</span>是哒</p>
              <p class="animated fadeIn pt-page-delay3000"><span>南都小编江英</span>回复<span>南都小编卫卫：</span>导播，你好 <i class="emo zy"></i></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon003.png" alt="">
      </div>
      <div class="content">
        <div class="name">南都记者娜迪娅</div>
        <div class="text">南方都市报两会君每天准时给你送来“语音新闻早餐”</div>
        <a class="img-box full mp3-box" href="javascript:void (0);">
          <i class="handTips"></i>
          <img src="~assets/friend/yuyin.png" alt="">
          <span class="txt">河北省委书记赵克志谈治理雾霾</span>
          <i class="dong"><img src="~assets/friend/mp3.gif" alt=""></i>
        </a>
        <div class="ct-box">
          <div class="comment animated fadeIn">
            <i class="ionc"></i>
            <div class="tit"><i></i>南都小编chunan、南都小编宝春</div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon004.png" alt="">
      </div>
      <div class="content">
        <div class="name">南都小编湘莹</div>
        <div class="text">“南都马上问”小程序亮相全国两会！赶快用起来，南都记者把你的声音带进会场！</div>
        <a class="img-box long" href="javascript:void (0);" @click="showframe('http://m.mp.oeeee.com/support.php?m=Governorask&a=nationAsk')">
          <img src="~assets/friend/img004.jpg" alt="">
          <i class="handTips"></i>
        </a>
        <div class="ct-box">
          <div class="comment">
            <i class="ionc"></i>
            <div class="tit animated fadeIn"><i></i>南都记者娜迪娅、南都记者商西、南都小编黄勇、南都小编欧阳云蔚、南都小编江英、南都小编戴越、南都小编柴华</div>
            <div class="cont animated fadeIn pt-page-delay100">
              <p class="animated fadeIn pt-page-delay700"><span>南都记者娜迪娅：</span>有话问总理？有话问部长？有话问省长？赶快用“南都马上问” <i class="emo zy"></i></p>
              <p class="animated fadeIn pt-page-delay1000"><span>南都小编湘莹</span>回复<span>南都记者娜迪娅：</span><i class="emo zy"></i></p>
              <p class="animated fadeIn pt-page-delay1500"><span>南都记者商西：</span>你的声音，有可能直达国务院、省政府、各市、各厅局 <i class="emo oy"></i></p>
              <p class="animated fadeIn pt-page-delay2000"><span>南都小编湘莹</span>回复<span>南都记者商西：</span><i class="emo zy"></i> 前线记者老师们辛苦了~</p>
              <p class="animated fadeIn pt-page-delay3000"><span>{{ user.name }}：</span>怎么找到“南都马上问”小程序？</p>
              <p class="animated fadeIn pt-page-delay4000"><span>南都小编湘莹</span>回复 <span>{{ user.name }}：</span>打开微信-发现-小程序，搜索“南都马上问</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon004.png" alt="">
      </div>
      <div class="content">
        <div class="name">南都小编湘莹</div>
        <div class="text">快来看，你们让南都带去两会的问题，政要回答了↓↓</div>
        <a class="img-box long" href="javascript:void (0);" @click="showframe('http://h5.oeeee.com/index.php?s=/MinisterAnswer&from=singlemessage&isappinstalled=0')">
          <img src="~assets/friend/img0011.jpg" alt="">
          <i class="handTips"></i>
        </a>
        <div class="ct-box">
          <div class="comment animated fadeIn">
            <i class="ionc"></i>
            <div class="tit"><i></i>南都记者娜迪娅、南都记者商西、南都小编黄勇、南都小编欧阳云蔚、南都小编江英、南都小编戴越、南都小编柴华</div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon005.png" alt="">
      </div>
      <div class="content">
        <div class="name">南都小编卫卫</div>
        <div class="text">两会太“高冷”？这些知识你会想知道</div>
        <a class="img-box long" href="javascript:void (0);" @click="showframe('http://00a0db555453.ih5.cn/idea/rwefJfa?vxparm=/vxid_1/senderid_6472057c742f284d#p1')">
          <img src="~assets/friend/img005.jpg" alt="">
          <i class="handTips"></i>
        </a>
        <div class="ct-box">
          <div class="comment">
            <i class="ionc"></i>
            <div class="tit animated fadeIn"><i></i>南都小编湘莹、南都记者娜迪娅、南都记者商西、南都小编黄勇、南都小编欧阳云蔚、南都小编江英、南都小编戴越、南都小编柴华</div>
            <div class="cont animated fadeIn pt-page-delay100">
              <p class="animated fadeIn pt-page-delay1000"><span>王天源：</span>好玩 <i class="emo dz"></i></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon006.png" alt="">
      </div>
      <div class="content">
        <div class="name">南都小编石力</div>
        <div class="text">转需~二孩烧钱计算器</div>
        <a class="img-box long" href="javascript:void (0);" @click="showframe('http://h5.nandu.com/wx.php?op=nd02&from=timeline&isappinstalled=0')">
          <img src="~assets/friend/img006.jpg" alt="">
          <i class="handTips"></i>
        </a>
        <div class="ct-box">
          <div class="comment">
            <i class="ionc"></i>
            <div class="tit animated fadeIn"><i></i>南都数据新闻工作室主持邹莹、南都小编逗号、南都小编chase、南都小编chunan、南都小编宝春、南都记者商西、南都记者娜迪娅、南都记者程姝雯、南都记者程思炜、南都小编卫卫、南都小编湘莹</div>
            <div class="cont animated fadeIn pt-page-delay100">
              <p class="animated fadeIn pt-page-delay1000"><span>南都小编宝春：</span>马上滚去搬砖……</p>
              <p class="animated fadeIn pt-page-delay2000"><span>南都小编chase</span>回复<span>南都小编宝春：</span><i class="emo tx"></i></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon007.png" alt="">
      </div>
      <div class="content">
        <div class="name">奥一网小编小饼酱</div>
        <div class="text">全国两会都关注个人信息保护了！快来《测一测，你被黑客盯上的指数》，南都出品哦~</div>
        <a class="img-box long" href="javascript:void (0);" @click="showframe('http://h5.oeeee.com/h5/heike/')">
          <img src="~assets/friend/img007.jpg" alt="">
          <i class="handTips"></i>
        </a>
        <div class="ct-box">
          <div class="comment animated fadeIn">
            <i class="ionc"></i>
            <div class="tit"><i></i>南都小编卫卫、南都小编湘莹、南都小编chase、南都小编宝春</div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon008.png" alt="">
      </div>
      <div class="content">
        <div class="name">南都小编逗号</div>
        <div class="text">听说集齐9张 “动起来 懂两会”系列动图，能召唤南都君！拿！礼！物！</div>
        <div class="img-box full">
          <img src="~assets/friend/img008.jpg" alt="">
          <i class="handTips"></i>
          <a href="javascript:void (0);" class="gifImg" @click="showBigImg('http://h5.oeeee.com/h5/cppcc/gif/gif-1.gif')"></a>
          <a href="javascript:void (0);" class="gifImg img2" @click="showBigImg('http://h5.oeeee.com/h5/cppcc/gif/gif-2.gif')"></a>
          <a href="javascript:void (0);" class="gifImg img3" @click="showBigImg('http://h5.oeeee.com/h5/cppcc/gif/gif-3.gif')"></a>
          <a href="javascript:void (0);" class="gifImg img4" @click="showBigImg('http://h5.oeeee.com/h5/cppcc/gif/gif-4.gif')"></a>
          <a href="javascript:void (0);" class="gifImg img5" @click="showBigImg('http://h5.oeeee.com/h5/cppcc/gif/gif-5.gif')"></a>
          <a href="javascript:void (0);" class="gifImg img6" @click="showBigImg('http://h5.oeeee.com/h5/cppcc/gif/gif-6.gif')"></a>
        </div>
        <div class="ct-box">
          <div class="comment">
            <i class="ionc"></i>
            <div class="tit animated fadeIn"><i></i>南都小编卫卫、南都小编湘莹、南都小编chase、南都小编宝春</div>
            <div class="cont animated fadeIn pt-page-delay100">
              <p class="animated fadeIn pt-page-delay1000"><span>南都小编逗号：</span>晒在朋友圈，并获得20个点赞，截屏发给南都微信公众号（微信公号：nddaily，并附上说明#动起来#姓名+电话+地址）</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <div class="header">
        <img src="~assets/friend/icon006.png" alt="">
      </div>
      <div class="content">
        <div class="name">南都小编石力</div>
        <div class="text">你以为的记者，和现实生活中的记者</div>
        <a class="img-box long" href="javascript:void (0);" @click="showBigImg('http://h5.oeeee.com/h5/cppcc/gif/002.jpg')">
          <img src="~assets/friend/last.jpg" alt="">
          <i class="handTips"></i>
        </a>
        <div class="ct-box">
          <div class="comment">
            <i class="ionc"></i>
            <div class="cont noline animated fadeIn pt-page-delay100">
              <p class="animated fadeIn pt-page-delay1000"><span>南都记者陈伟斌：</span>哈哈哈哈哈哈哈</p>
              <p class="animated fadeIn pt-page-delay1500"><span>南都记者商西：</span><i class="emo wl"></i></p>
              <p class="animated fadeIn pt-page-delay2000"><span>南都记者程姝雯：</span><i class="emo wl"></i></p>
              <p class="animated fadeIn pt-page-delay3000"><span>南都视频编辑克|||：</span>人艰不拆</p>
              <p class="animated fadeIn pt-page-delay4000"><span>南都视频编辑津津：</span>2333333333333333</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="foot">
      <button class="btn" @click="showBigImg('http://h5.oeeee.com/h5/cppcc/gif/share-pic.png','50%')" type="button">拉其他好友进群</button>
    </div>

    <!--展示大图-->
    <transition name="fade">
      <div v-show="bigImg.show" class="bigImg" @click="hideBigImg"><img :src="bigImg.url" alt=""></div>
    </transition>

    <!--音乐-->
    <audio id="mp3" data-statu="false" src="http://h5.oeeee.com/h5/cppcc/video/mp3.mp3"></audio>

    <div id="urlframe" v-if="sframe.on">
      <a href="javascript:void(0);" v-on:click="closeframe" class="closeframe"></a>
      <div class="frames">
        <iframe v-bind:src="sframe.url" scrolling="auto"></iframe>
      </div>
    </div>
  </div>
</template>

<script type="es6">
  var ma3first = true;
  export default {
    data() {
      return {
        list: 'wo cah',
        user: $user,
        bigImg : {
          show : false,
          url : ''
        },
        sframe : {
          on : false,
          url : ''
        },
        sharebox : {
          show : false
        }
      }
    },

    mounted() {
      this.getBanner();
    },

    methods: {
      //请求别人家的api获取列表 /api/xxxx 会被proxy，绕过跨域

      getBanner() {
        //播放或者暂停音乐
        $('.mp3-box').click(function () {
            var statu = $(this).data('statu');
            if(!statu){
              $(this).data('statu',true);
              $('.mp3-box .dong').show();
              document.getElementById('mp3').play();
            }else{
              $(this).data('statu',false);
              $('.mp3-box .dong').hide();
              document.getElementById('mp3').pause();
            }
        });

        $('html,body').scrollTop(0);

        function is_weixin(){
          var ua = navigator.userAgent.toLowerCase();
          if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
          } else {
            return false;
          }
        }

        //滚动动画
        $(window).scroll(function () {
          var top = $(document).scrollTop();
          var widH = $(window).height();

          //自动播放mp3
          /*var mp3Top = $('.mp3-box').offset().top;
          if((top+widH*3/4)>mp3Top && ma3first){
              ma3first = false;
              $('.mp3-box').data('statu',true);
              $('.mp3-box .dong').show();
              if(is_weixin()){
                WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
                  document.getElementById('mp3').play();
                });
              }else{
                document.getElementById('mp3').play();
              }

          }*/

          $('.ct-box').each(function (index) {
            var thisH = $(this).offset().top;
            if((top+widH*3/4)>thisH){
              $(this).find('.comment').show();
            }
            if(($('.ct-box').length-1)==index){
              if((top+widH-10)>=thisH){
                $(this).find('.comment').show();
              }
            }
          })
        })
      },
      //显示大图
      showBigImg(url, width) {
          this.bigImg.show = true;
          this.bigImg.url = url;
          var height = $(window).height();
          $('.bigImg').css({'line-height':height+'px'});
          $('body').css("overflow","hidden");
          if(width){
            $('.bigImg img').css({width:width})
          }else {
            $('.bigImg img').css({width:''})
          }
      },
      //隐藏显示
      hideBigImg(){
        this.bigImg.show = false;
//        this.bigImg.url = '';
        $('body').css("overflow","visible");
      },
      showframe: function(url){
        this.sframe.on = true;
        this.sframe.url = url;
//        sessionStorage.cppcc_scrollTop = $(document).scrollTop();
//        window.open(url);
      },
      closeframe: function(e){
        var _this = this;
        _this.sframe.on = false;
        _this.sframe.url = '';
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less" scoped>
  @import '~assets/css/less.less';
  img{max-width: 100%;display: block;}
  .head{width: 100%;position: relative;margin-bottom: 90/@rem;height: 500/@rem;
    .pic{position: absolute;width: 142/@rem;height: 142/@rem;bottom: -48/@rem;right: 20/@rem;padding: 3/@rem;border: 1px solid #cfd0d4;background-color: #fff;}
    .name{position: absolute;right: 180/@rem;bottom: 78/@rem;color: #fff;font-size: 32/@rem;width: 200/@rem;text-align: right;}
  }
  .list{padding: 40/@rem 0;display: table;width: 100%;border-bottom: 1px solid #d1d1d1;
    & > *{display: table-cell;vertical-align: top;}
    .header{width: 84/@rem;padding-left: 20/@rem;
      img{width: 84/@rem;height: 84/@rem;}
    }
    .content{padding:5/@rem 20/@rem 0;}
    .name{color: @blue;font-size: 32/@rem;}
    .text{color: #000;font-size: 32/@rem;margin-top: 10/@rem;}
    .img-box{width: 200/@rem;margin-top: 20/@rem;display: block;position: relative;
      &.long{width: 400/@rem;}
      &.full{width: 100%;position: relative;
        span{position: absolute;font-size: 24/@rem;left: 10%;top: 23.5%;color: #000;}
        .gifImg{position: absolute;width: 33.33%;height: 50%;top: 0;left: 0;
          &.img2{left: 33.33%;}
          &.img3{left: 66.66%;}
          &.img4{top: 50%;}
          &.img5{left: 33.33%;top: 50%;}
          &.img6{left: 66.66%;top: 50%;}
        }
      }
      &.mp3-box{
        .dong{position: absolute;height: 100%;left: 1px;top: 1px;display: none;
          img{width: 48/@rem;height: auto;}
        }
        .handTips{bottom: -50/@rem;right: 50/@rem;}
      }
      video{width: 100%;background-repeat: no-repeat;}
      .video-1{background-image: url("http://h5.oeeee.com/h5/cppcc/gif/img002.jpg");background-size: 100%;}
      .video-2{background-image: url("http://h5.oeeee.com/h5/cppcc/gif/img003.jpg");background-size: 100%;}
      .video-3{background-image: url("http://h5.oeeee.com/h5/cppcc/gif/img009.jpg");background-size: 100%;}
    }
    .comment{background-color: #f3f3f5;position: relative;font-size: 28/@rem;margin-top: 25/@rem;display: none;
      .ionc{position: absolute;width: 0;height: 0;border: 14/@rem solid transparent;border-bottom-color: #f3f3f5;top: -24/@rem;left: 30/@rem;}
      .tit{line-height: 36/@rem;padding: 15/@rem 20/@rem;color: @blue;
        i{width: 23/@rem;height: 21/@rem;display: inline-block;margin-right: 12/@rem;background:url("~assets/friend/xin.png") no-repeat;background-size: 100%;}
      }
      .cont{border-top: 1px solid #d0d0d2;padding: 20/@rem 20/@rem 0;
        &.noline{border: none;}
        p{padding-bottom: 15/@rem;text-align: justify;font-size: 26/@rem;}
        span{color: @blue;}
      }
    }
  }
  .emo{display: inline-block;width: 36/@rem;height: 36/@rem;background-size: 100%;background-repeat: no-repeat;vertical-align: bottom;
    &.gz{background-image: url("~assets/friend/tu001.png");}
    &.jz{background-image: url("~assets/friend/tu002.png");}
    &.xl{background-image: url("~assets/friend/tu003.png");}
    &.wl{background-image: url("~assets/friend/tu004.png");}
    &.dz{background-image: url("~assets/friend/tu005.png");}
    &.tx{background-image: url("~assets/friend/tu006.png");}
    &.zy{background-image: url("~assets/friend/tu007.png");}
    &.oy{background-image: url("~assets/friend/tu008.png");}
    &.hx{background-image: url("~assets/friend/tu009.png");}
  }
  .foot{padding: 56/@rem 0 100/@rem;
    .btn{height: 90/@rem;border-radius: 30px;background-color: #00982e;color: #fff;font-size: 36/@rem;border: none;width: 60%;margin: 0 auto;display: block;outline: none;}
  }
  /*显示大图*/
  .bigImg{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.75);overflow: auto;text-align: center;z-index: 100;
    img{display: inline-block;line-height: 100%;width: 100%;max-height: none;vertical-align: middle;}
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0
  }
  #urlframe{
    .closeframe{position:fixed; width:131/@rem; height:131/@rem;overflow: auto; background:url("~assets/closeframe.png") 0 0/contain no-repeat; z-index:100; top:0; left:50%; margin-left:-65.5/@rem;}
    .frames{
      position: fixed; right: 0; bottom: 0; left: 0; top: 0;
      height:100%; width:100%; top:5%; border:15/@rem solid #000; background:#fff; box-sizing: border-box;
      -webkit-overflow-scrolling: touch; overflow-y: scroll; z-index:99;
      iframe{
        width: 100%; height: 95%; border:none;
      }
    }
  }
  .ct-box{display: block;}
</style>
